<template>
  <style>
    :host {
      --diagnostics-google-sans-font-family: "Google Sans", sans-serif;
      --diagnostics-roboto-font-family: Roboto, sans-serif;

      --diagnostics-default-font-size: 14px;
      --diagnostics-header-font-size: 16px;
      --diagnostics-card-drawer-font-size: 13px;
      --diagnostics-card-title-font-size: 14px;
      --diagnostics-data-point-title-font-size: 13px;
      --diagnostics-data-point-subtitle-font-size: 13px;
      --diagnostics-overview-font-size: 13px;
      --diagnostics-chart-label-font-size: 15px;
      --diagnostics-chart-tick-font-size: 12px;
      --diagnostics-chart-legend-font-size: 12px;
      --diagnostics-text-badge-font-size: 11px;
      --diagnostics-routine-additional-message-font-size: 13px;
      --diagnostics-routine-name-font-size: 13px;
      --diagnostics-test-status-text-font-size: 13px;
      --diagnostics-button-font-size: 13px;
      --diagnostics-caution-banner-font-size: 14px;
      --diagnostics-troubleshooting-font-size: 13px;

      --diagnostics-regular-font-weight: 400;
      --diagnostics-medium-font-weight: 500;

      --diagnostics-header-text-color: var(--cros-text-color-primary);
      --diagnostics-card-title-text-color: var(--cros-text-color-secondary);
      --diagnostics-overview-text-color: var(--cros-text-color-secondary);
      --diagnostics-data-point-title-color: var(--cros-text-color-primary);
      --diagnostics-data-point-subtitle-color: var(--cros-text-color-secondary);
      --diagnostics-routine-additional-message-color: var(--cros-text-color-primary);
      --diagnostics-routine-name-color: var(--cros-text-color-primary);
      --diagnostics-chart-legend-color: var(--cros-text-color-primary);
      --diagnostics-chart-title-color: var(--cros-text-color-secondary);
      --diagnostics-test-status-text-color: var(--cros-text-color-secondary);
      --diagnostics-caution-banner-text-color: var(--cros-text-color-primary);
      --diagnostics-link-text-color: var(--cros-link-color);
      --diagnostics-settings-link-text-color: var(--cros-text-color-secondary);

      --diagnostics-default-font: {
          font-family: var(--diagnostics-google-sans-font-family);
          font-size: var(--diagnostics-default-font-size);
          font-weight: var(--diagnostics-medium-font-weight);
      };

      --diagnostics-header-font: {
          color: var(--diagnostics-header-text-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-header-font-size);
          font-weight: var(--diagnostics-medium-font-weight);
      };

      --diagnostics-card-drawer-font: {
          color: var(--diagnostics-header-text-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-card-drawer-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };

      --diagnostics-card-title-font: {
          color: var(--diagnostics-card-title-text-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-card-title-font-size);
          font-weight: var(--diagnostics-medium-font-weight);
      };

      --diagnostics-data-point-title-font: {
          color: var(--diagnostics-data-point-title-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-data-point-title-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-data-point-subtitle-font: {
          color: var(--diagnostics-data-point-subtitle-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-data-point-subtitle-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-overview-font: {
          color: var(--diagnostics-overview-text-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-overview-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-chart-title-font: {
          color: var(--diagnostics-chart-title-color);
          font-family: var(--diagnostics-google-sans-font-family);
          font-size: var(--diagnostics-default-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-chart-label-font: {
          font-family: var(--diagnostics-google-sans-font-family);
          font-size: var(--diagnostics-chart-label-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-chart-tick-font: {
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-chart-tick-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-chart-legend-font: {
          color: var(--diagnostics-chart-legend-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-chart-legend-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-text-badge-font: {
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-text-badge-font-size);
          font-weight: var(--diagnostics-medium-font-weight);
      };
      --diagnostics-routine-name-font: {
          color: var(--diagnostics-routine-name-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-routine-name-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-test-status-text-font: {
          color: var(--diagnostics-test-status-text-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-test-status-text-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-routine-additional-message-font: {
          color: var(--diagnostics-routine-additional-message-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-routine-additional-message-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-button-font: {
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-button-font-size);
          font-weight: var(--diagnostics-medium-font-weight);
      };
      --diagnostics-caution-banner-font: {
        color: var(--diagnostics-caution-banner-text-color);
        font-family: var(--diagnostics-roboto-font-family);
        font-size: var(--diagnostics-caution-banner-font-size);
        font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-troubleshooting-font: {
          color: var(--diagnostics-header-text-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-troubleshooting-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-connecting-link-font: {
          color: var(--diagnostics-link-text-color);
          font-family: var(--diagnostics-roboto-font-family);
          font-size: var(--diagnostics-troubleshooting-font-size);
          font-weight: var(--diagnostics-regular-font-weight);
      };
      --diagnostics-settings-link-font: {
        color: var(--diagnostics-settings-link-text-color);
        font-family: var(--diagnostics-roboto-font-family);
        font-size: var(--diagnostics-default-font-size);
        font-weight: var(--diagnostics-regular-font-weight);
      };
    }
  </style>
</template>
